<template>
  <div>
    <!--    左侧部分-->
    <el-row :gutter="10">
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <div>
            <div class="left_img">
              <!--              <img src="require()" alt="">-->
              <img :src="require('../assets/login_img.png')" alt="">
            </div>
          </div>
        </div>
      </el-col>
      <!--      右侧部分-->
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <!--输入框-->
          <div class="right_input">
            <input v-model="loginData.login_account_string" type="text" class="right_input_account" placeholder="账号">
            <br>
            <input v-model="loginData.password" type="password" class="right_input_password"
                   v-on:keyup.enter="loginSubmit"
                   placeholder="密码">
          </div>
          <div class="right_login_icon" @click="loginSubmit">
            <el-icon :size="25">
              <Check/>
            </el-icon>
          </div>
          <div>
            <!--            注册账号 找回账号 记住密码 自动登录-->
            <div class="right_msg_top">
              <div style="display: inline-block" class="div_keep_password">
                <el-checkbox v-model="keep_password" label="记住密码" size="large"></el-checkbox>
              </div>
              <div style="display: inline-block" class="div_login_text_zhaohui_password">
                找回密码
              </div>
            </div>
            <div class="right_msg_bot">
              <div style="display: inline-block" class="div_auto_login">
                <el-checkbox v-model="auto_login" label="自动登录" size="large"></el-checkbox>
              </div>
              <div style="display: inline-block" class="div_login_text_register_account" @click="changePageToRegister">
                注册账号
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {Check} from '@element-plus/icons'
import {ipcRenderer} from "electron"
import {ElNotification} from 'element-plus'
import {request} from '../util/httprequest'
import {openLoading, closeLoading} from "../util/loading";

export default {
  name: "login",
  components: {Check},
  data() {
    return {
      login_account_string: 0,
      password: "",
      loginData: {
        account: "",
        password: "",
      },
      keep_password: false,
      auto_login: false,
      // url.
      jump_found_password: "",
      jump_registered_account: "",
    }
  },
  methods: {
    // 回车.
    loginSubmit: function () {
      //         this.$store.commit('loginSuc')
      let loading = openLoading("Loading...")
      if (this.loginData.login_account_string === "" || this.loginData.password === "") {
        this.notification("密码错误!", "账号或密码为空!", "success")
        closeLoading(loading)
        return
      }

      request("post", "/user/login", this.loginData).then((response) => {
        let type = "error"
        console.log("login response")
        console.log(response)
        if (response.data.code === 0) {
          // 成功.
          type = "success"
          this.$store.commit('loginSuc', response.data.data)
          // 还需要获取登录之后需要的信息.
          // 修改nowMessage信息为一段特殊信息.
          // 同步account.
          // 还是需要保存一下的.
          ipcRenderer.send('login_suc',response.data.data.user.login_account_string)
          // 登录成功之后在进行链接ws.
          this.$parent.connectionWs()
          this.$store.state.nowMessage = "**&&^^%%^^&&**"
        }
        closeLoading(loading)
        this.notification("提示信息!", response.data.msg, type)
      })
    },

    // 抽成公用的方法.
    notification: (title, msg, type) => {
      ElNotification({
        title: title, // Success
        message: msg, // message.
        type: type, // 类型(颜色)
      })
    },

    changePageToRegister() {
      this.$store.commit('setWinState', -1)
    },
  },
  mounted() {
    // this.$store.commit('initWebSocket')
    // 初始化自动登录等.
  },
  created() {
    console.log("login created")
  }
}
</script>

<style scoped>

.left_img {
  margin-top: 130px;
  -webkit-user-select: none;
}

.right_input {
  margin-top: 280px;
  display: inline-block;
}

/*灰色带阴影.*/
.right_login_icon {
  display: inline-block;
  /*background-color:   #9ec8da;*/
  border-radius: 10px;
  cursor: pointer;
  margin-left: -22px;
  margin-bottom: -3px;
  position: absolute;
  margin-top: 329px;
  box-shadow: 0px 0px 1px black, 0px 0px 1px #ecf0f1, 0px 0px 1px #ecf0f1, 0px 0px 1px black;
  transition: all 0.6s;
}

div[class="right_login_icon"]:hover {
  transform: scale(1.4);
}

/*当正在填写的时候是一个颜色*/
.right_input_account {
  width: 20em;
  /*margin-bottom: 2em;*/
  outline: none;
  background: none;
  height: 40px;
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  border-bottom: 1px solid #3498db;
}

/*input[class="right_input_account"]:focus {*/
/*  !*border: 1px dashed #3498db;*!*/
/*  border-top: 1px dashed #3498db;*/
/*}*/

.right_input_password {
  width: 20em;
  outline: none;
  background: none;
  height: 40px;
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
  border-bottom: 1px solid #3498db;
}

.right_msg_top {
  margin-top: 6em;
}

.right_msg_bot {
  margin-top: 3em;
}

.div_keep_password {
  margin-right: 7em;
}

.div_auto_login {
  margin-right: 7em;
}

/*div_login_text_zhaohui_password  div_login_text_register_account*/

div[class="div_login_text_zhaohui_password"]:hover {
  cursor: pointer;
  color: #0984e3;
}

div[class="div_login_text_register_account"]:hover {
  cursor: pointer;
  color: #0984e3;
}

</style>